<!--

=========================================================
* Neumorphism UI - v1.0.0
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/neumorphism-ui
* Copyright 2020 Themesberg MIT LICENSE (https://www.themesberg.com/licensing#mit)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Neumorphism UI - Pricing"
    })
</head>

<body>
    @@include('./_navigation.html', {
        "path": "../..",
        "classes": "navbar-light"
    })
    <main>
        <!-- Hero -->
        <section class="section section-header bg-primary">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-xl-8 text-center">
                        <h1 class="display-2 font-weight-light mb-4">Our <span class="font-weight-bold">Pricing</span>
                        </h1>
                        <p class="lead">Our pricing isn’t one-size-fits-all. We calculate your personalized quote by looking at your specific needs, as well as the monthly activity of your website.</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Section -->
        <div class="section section-lg pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <!-- Pricing Card -->
                        <div class="card bg-primary shadow-inset border-light p-4">
                            <!-- Header -->
                            <header class="card-header shadow-soft text-center border border-light rounded mb-4">
                                <span class="d-block">
                                    <span class="display-1 font-weight-bold">
                                        <span class="align-top font-medium">$</span>19
                                </span>
                                <span class="font-small">/ month</span>
                                </span>
                            </header>
                            <!-- End Header -->
                            <!-- Content -->
                            <div class="card-body shadow-soft text-center border border-light rounded">
                                <p>Faster sites deliver better business results for your clients.</p>
                                <ul class="list-group mb-4">
                                    <li class="list-group-item"><strong>License</strong> Personal</li>
                                    <li class="list-group-item"><strong>Full Support</strong> No</li>
                                    <li class="list-group-item"><strong>Storage</strong> 50 GB</li>
                                    <li class="list-group-item"><strong>Monthly Visitors</strong> 400k</li>
                                    <li class="list-group-item"><strong>Templates</strong> 10</li>
                                </ul>
                                <button type="button" class="btn btn-primary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-2"></span>Add to Cart</button>
                            </div>
                            <!-- End Content -->
                        </div>
                        <!-- End of Pricing Card -->
                    </div>
                    <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <!-- Pricing Card -->
                        <div class="card bg-primary shadow-inset border-light p-4">
                            <!-- Header -->
                            <header class="card-header shadow-soft text-center border border-light rounded mb-4">
                                <span class="d-block">
                                    <span class="display-1 font-weight-bold">
                                        <span class="align-top font-medium">$</span>39
                                </span>
                                <span class="font-small">/ month</span>
                                </span>
                            </header>
                            <!-- End Header -->
                            <!-- Content -->
                            <div class="card-body shadow-soft text-center border border-light rounded">
                                <p>Faster sites deliver better business results for your clients.</p>
                                <ul class="list-group mb-4">
                                    <li class="list-group-item"><strong>License</strong> Personal</li>
                                    <li class="list-group-item"><strong>Full Support</strong> Yes</li>
                                    <li class="list-group-item"><strong>Storage</strong> 100 GB</li>
                                    <li class="list-group-item"><strong>Monthly Visitors</strong> 800k</li>
                                    <li class="list-group-item"><strong>Templates</strong> 30</li>
                                </ul>
                                <button type="button" class="btn btn-primary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-2"></span>Add to Cart</button>
                            </div>
                            <!-- End Content -->
                        </div>
                        <!-- End of Pricing Card -->
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <!-- Pricing Card -->
                        <div class="card bg-primary shadow-inset border-light p-4">
                            <!-- Header -->
                            <header class="card-header shadow-soft text-center border border-light rounded mb-4">
                                <span class="d-block">
                                    <span class="display-1 font-weight-bold">
                                        <span class="align-top font-medium">$</span>119
                                </span>
                                <span class="font-small">/ month</span>
                                </span>
                            </header>
                            <!-- End Header -->
                            <!-- Content -->
                            <div class="card-body shadow-soft text-center border border-light rounded">
                                <p>Faster sites deliver better business results for your clients.</p>
                                <ul class="list-group mb-4">
                                    <li class="list-group-item"><strong>License</strong> Commercial</li>
                                    <li class="list-group-item"><strong>Full Support</strong> Yes</li>
                                    <li class="list-group-item"><strong>Storage</strong> 400 GB</li>
                                    <li class="list-group-item"><strong>Monthly Visitors</strong> 1m+</li>
                                    <li class="list-group-item"><strong>Templates</strong> All items</li>
                                </ul>
                                <button type="button" class="btn btn-primary btn-block" tabindex="0"><span class="fas fa-cart-plus mr-2"></span>Add to Cart</button>
                            </div>
                            <!-- End Content -->
                        </div>
                        <!-- End of Pricing Card -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Section -->
        <!-- Section -->
        <div class="section section-lg pt-0">
            <div class="container">
                <div class="row text-center justify-content-center">
                    <div class="col-md-8 mb-5">
                        <h2 class="h4 font-weight-light">Trusted by</h2>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/airbnb.svg" class="img-fluid image-sm" alt="airbnb logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/paypal.svg" class="img-fluid image-sm" alt="paypal logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/ebay.svg" class="img-fluid image-sm" alt="ebay logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/forbes.svg" class="img-fluid image-sm" alt="forbes logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/corsair.svg" class="img-fluid image-sm" alt="corsair logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 text-center">
                        <div class="card bg-primary shadow-soft border-light mb-4">
                            <div class="card-body py-5">
                                <img src="../../assets/img/clients/pinterest.svg" class="img-fluid image-sm" alt="pinterest logo">
                                <p class="card-text py-5 mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary text-dark btn-icon">
                                    <span class="btn-inner-icon"><span class="far fa-eye"></span></span>
                                    <span class="btn-inner-text font-weight-bold">See story</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of section -->
        <section class="section section-lg bg-primary pt-0">
            <div class="container">
                <div class="row text-center justify-content-center">
                    <div class="col-md-8 mb-5">
                        <h2 class="font-weight-light">Frequently asked <span class="font-weight-bold">questions</span></h2>
                        <p class="lead">Find the answer to your question.</p>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <!--Accordion-->
                        <div class="accordion shadow-soft rounded" id="accordionExample1">
                            <div class="card card-sm card-body bg-primary border-light mb-0">
                                <a href="#panel-1" data-target="#panel-1" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                    <span class="h6 mb-0 font-weight-bold">Our Company</span>
                                    <span class="icon"><span class="fas fa-plus"></span></span>
                                </a>
                                <div class="collapse" id="panel-1">
                                    <div class="pt-3">
                                        <p class="mb-0">
                                            At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                            helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card card-sm card-body bg-primary border-light mb-0">
                                <a href="#panel-2" data-target="#panel-2" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                    <span class="h6 mb-0 font-weight-bold">Neumorphism Components</span>
                                    <span class="icon"><span class="fas fa-plus"></span></span>
                                </a>
                                <div class="collapse" id="panel-2">
                                    <div class="pt-3">
                                        <p class="mb-0">
                                            At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                            helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card card-sm card-body bg-primary border-light mb-0">
                                <a href="#panel-3" data-target="#panel-3" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-3">
                                    <span class="h6 mb-0 font-weight-bold">What is Neumorph Ui Kit?</span>
                                    <span class="icon"><span class="fas fa-plus"></span></span>
                                </a>
                                <div class="collapse" id="panel-3">
                                    <div class="pt-3">
                                        <p class="mb-0">
                                            At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                            helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card card-sm card-body bg-primary border-light">
                                <a href="#panel-4" data-target="#panel-4" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-4">
                                    <span class="h6 mb-0 font-weight-bold">Licenses</span>
                                    <span class="icon"><span class="fas fa-plus"></span></span>
                                </a>
                                <div class="collapse" id="panel-4">
                                    <div class="pt-3">
                                        <p class="mb-0">
                                            At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                            helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--End of Accordion-->
                    </div>
                </div>
            </div>
        </section>
    </main>

    @@include('./_footer.html', {
        "path": "../..",
        "classes": "bg-primary"
    })

    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>